<template>
  <div class="dashboard">
    <a-row :gutter="16">
      <!-- System Introduction -->
      <a-col :span="24">
        <a-card class="system-intro">
          <template #title>
            <div class="card-title">
              <info-circle-outlined />
              <span>System Introduction</span>
            </div>
          </template>
          <p>This is a modern permission management system based on Vue 3 + Spring Boot, using a front-end and back-end separation architecture. It provides complete user, role, and permission management functions. The system features high performance, high availability, and high security, supports internationalization, and offers a user-friendly interface.</p>
        </a-card>
      </a-col>

      <!-- Frontend Stack -->
      <a-col :span="12">
        <a-card class="tech-stack">
          <template #title>
            <div class="card-title">
              <desktop-outlined />
              <span>Frontend Stack</span>
            </div>
          </template>
          <a-descriptions :column="1">
            <a-descriptions-item label="Framework">
              Vue 3 + TypeScript
            </a-descriptions-item>
            <a-descriptions-item label="UI Framework">
              Ant Design Vue
            </a-descriptions-item>
            <a-descriptions-item label="State Management">
              Pinia
            </a-descriptions-item>
            <a-descriptions-item label="Router">
              Vue Router
            </a-descriptions-item>
            <a-descriptions-item label="Internationalization">
              Vue I18n
            </a-descriptions-item>
            <a-descriptions-item label="Build Tool">
              Vite
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>

      <!-- Backend Stack -->
      <a-col :span="12">
        <a-card class="tech-stack">
          <template #title>
            <div class="card-title">
              <code-outlined />
              <span>Backend Stack</span>
            </div>
          </template>
          <a-descriptions :column="1">
            <a-descriptions-item label="Framework">
              Spring Boot
            </a-descriptions-item>
            <a-descriptions-item label="Security Framework">
              Sa-Token
            </a-descriptions-item>
            <a-descriptions-item label="ORM Framework">
              MyBatis Plus
            </a-descriptions-item>
            <a-descriptions-item label="Cache">
              Redis
            </a-descriptions-item>
            <a-descriptions-item label="Database">
              MySQL
            </a-descriptions-item>
            <a-descriptions-item label="API Style">
              RESTful API
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>

      <!-- System Features -->
      <a-col :span="24">
        <a-card class="features">
          <template #title>
            <div class="card-title">
              <appstore-outlined />
              <span>System Features</span>
            </div>
          </template>
          <a-row :gutter="16">
            <a-col :span="8">
              <a-card class="feature-card">
                <template #title>
                  <user-outlined />
                  User Management
                </template>
                <p>Provides user CRUD operations, password reset, status management, and supports user import/export.</p>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card class="feature-card">
                <template #title>
                  <team-outlined />
                  Role Management
                </template>
                <p>Supports role creation, editing, deletion, and permission assignment for flexible access control.</p>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card class="feature-card">
                <template #title>
                  <safety-outlined />
                  Permission Management
                </template>
                <p>Fine-grained permission control, supporting menu permissions, button permissions, and data permissions.</p>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import {
  InfoCircleOutlined,
  DesktopOutlined,
  CodeOutlined,
  AppstoreOutlined,
  UserOutlined,
  TeamOutlined,
  SafetyOutlined
} from '@ant-design/icons-vue'
</script>

<style lang="less" scoped>
.dashboard {
  .system-intro {
    margin-bottom: 16px;
  }

  .tech-stack {
    margin-bottom: 16px;
  }

  .features {
    .feature-card {
      height: 100%;
    }
  }

  .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
</style> 